import React from 'react';
import {Button,Select,DatePicker,Table,Input,Message,Modal,Form} from 'antd';
import {hashHistory} from 'react-router';
const createForm = Form.create;
const FormItem = Form.Item;
let love = React.createClass({
    getInitialState(){
      return{
        state:true,
        amount:1000000,
        rest:100000,
        type:'0',
        dateRange:[],
        visible:false,
        pagination: {
           currentPage: 1,
            pageSize: 5
        },
        getCashData:[],   //提现记录
        myCount:[],    //账户基本信息
      };
    },
    componentDidMount(){
       this.getCountDetail();
       this.handleSearch();
    },
     handleSearch() {
        this.setState({
          pagination: {
            currentPage: 1,
            pageSize: 5
          }
        })
        this.fetch();
    },
    getCountDetail(){
      let params={};
      let self= this;
      Utils.sendAjax({
            url:'/user/account/detail',
            data:JSON.stringify(params),
            callback:function(result){
              if(result.code=='200'){
                self.setState({
                  myCount:result.start
                });
              }
            }
          });

    },
    fetch(){
      let self = this;
      let forms = this.props.form.getFieldsValue();
      let page = this.state.pagination.currentPage;
      let data = {
        // startTime:this.state.dateRange[0]||now.toLocaleDateString(),
        // endTime:this.state.dateRange[1]||now.toLocaleDateString(),
        startTime:this.state.dateRange[0]||'',
        endTime:this.state.dateRange[1]||'',
        paymentState:forms.paymentState,
      };
      let params = Object.assign({}, {pageSize: 5, currentPage: page}, data);

      let now = new Date();
      
      Utils.sendAjax({
        url:'/user/cash/findList',
        data:JSON.stringify(params),
        callback:function(result){
          if(result.code=='200'){
            Message.success(result.message);
              self.setState({
              myCashData:result.data,
              pagination: result.page
            });
          }
        }
      });
    },
    handleTableChange(pagination) {
      console.log(pagination);
        const pager = this.state.pagination;
        pager.currentPage = pagination.current;
        console.log(pager);
        this.setState({
            pagination: pager
        });
        this.fetch();
    },
    handleReset() {
      this.props.form.resetFields();
    },
     onChange(value, dateString) {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
        this.setState({
          dateRange:dateString
      });
    },
    check(){
      
    },
    submitGET(){
      let self = this;
      let params = this.props.form.getFieldsValue();
      console.log(params);
      let data = {
        amount:params.amount,
        bankBranch:params.bankBranch,
        bankNo:params.bankNo,
        bankUser:params.bankUser,
        password:params.password,
      }
      Utils.sendAjax({
        url:'cash/user/apply',
        data:JSON.stringify(data),
        callback:function(result){
          if(result.code == '200'){
              self.setState({
              visible:false
            });
            Message.success(result.message);
            Modal.success({
              title:'提交成功',
              content:'爱租派已收到您的提现申请,我们会于3-5个工作日内处理,请关注您的提现记录！',
              okText:'查看申请记录',
              onOk:function(){
                hashHistory.push('/system/cashIndex');
                self.handleSearch();
              },
              maskClosable:true
            });
          }else if(result.code == '400'){
               Message.error(result.message);
          }else if(result.code == '404'){
            Message.error(result.message);
          }else if(result.code == '500'){
            Message.error("提现金额不能为空");
          }
        }
      });
    },
    toClash(){
      this.setState({
        visible:true
      });
    },
  cancel(){
    this.setState({
      visible:false
    });
  },
    render(){
      const Option = Select.Option;
      const RangePicker = DatePicker.RangePicker;
      const FormItem = Form.Item;
      const { getFieldProps } = this.props.form;
      const data = this.state.myCashData;
      const paymentStateProps = getFieldProps('paymentState',{initialValue: ''});
      const paymentState ={0:'处理中',1:'支付完成',3:'驳回'};
      const Columns =[ {
         title:'申请时间',
         dataIndex:'applyTime',
         key:'applyTime'
      },{
        title:'提现金额',
        dataIndex:'amount',
        key:'amount'
      },{
        title:'开户行',
        dataIndex:'bankBranch',
        key:'bankBranch'
      },{
        title:'银行卡号',
        dataIndex:'bankNo',
        key:'bankNo'
      },{
        title:'手续费',
        dataIndex:'deductAmount',
        key:'deductAmount'
      },{
        title:'提现结果',
        dataIndex:'paymentState',
        key:'paymentState',
        render: text => <span>{paymentState[text]}</span>
      }];
      return (
        <div>
        <div className='basicInfo'>
          <div className='basicItem'>
              <i className="getMoney1"></i>
             <div>
               <div><font>{this.state.myCount.incAccount}</font><font>元</font></div>
               <div><font>增值账户</font></div>
             </div>
          </div>
          <div className='basicItem'>
              <i className="getMoney"></i>
             <div>
               <div><font>{this.state.myCount.bscAccount}</font><font>元</font></div>
               <div><font>账户余额</font></div>
             </div>
          </div>
          <div className='basicItem'><Button type='primary' onClick={this.toClash}>立即提现</Button></div>
        </div>
        <div className='formList search-bar'>

              <Form inline style={{paddingBottom:'20px'}}>
                <FormItem label='交易类型'>
               <Select {...paymentStateProps} style={{width:'162px'}}>
                <Option value=''>全部</Option>
                <Option value='1'>支付完成</Option>
                <Option value='3'>驳回</Option>
                <Option value='0'>处理中</Option>
                </Select>
               </FormItem>
               <FormItem label='日期范围'>
               <RangePicker
                 showTime
                    format="YYYY-MM-dd HH:mm:ss"
                    placeholder={['Start Time', 'End Time']}
                    onChange={this.onChange}
                    onOk={this.onOk} />
               </FormItem>
              <FormItem>
               <Button type='primary' onClick={this.handleSearch} style={{marginRight:'20px'}}>查 询</Button>
               <Button type='primary' onClick={this.handleReset}>重 置</Button>
               </FormItem>
               <FormItem>
             </FormItem>
             </Form>
           <div className='formBody'>
             <Table columns={Columns} dataSource={data} rowKey={record => record.id}
             onChange={this.handleTableChange}
                       pagination={this.state.pagination} />
           </div>
        </div>
          <Modal wrapClassName='cashModel accountContent fr' title="提现申请" visible={this.state.visible}
            onOk={this.submitGET} onCancel={this.cancel}
            okText="立即提现" cancelText="我在想想"
          >
            <div className='resetPwd'>
            <Form style={{paddingTop:'1rem',paddingBottom:'17rem',marginLeft: '7%'}}>
            {
              <ul>
                     <li>
                          <label>提现账户</label><font className='Cash-font'>基础账户</font>
                     </li>
                     <li><label className="fl ant-form-item">申请提现金额</label>
                        <FormItem  className="fr"  label="">
                            <Input type='number'  {...getFieldProps('amount')}   placeholder='如：2000.0' />
                        </FormItem>
                    </li>
                      <li><label className="fl ant-form-item">开户人</label>
                        <FormItem  className="fr"  label="">
                            <Input  {...getFieldProps('bankUser')} placeholder='如：张三' />
                        </FormItem>
                    </li>
                      <li><label className="fl ant-form-item">开户行</label>
                        <FormItem  className="fr"  label="">
                            <Input  {...getFieldProps('bankBranch')} placeholder='如：农业银行萧山分行' />
                        </FormItem>
                    </li>
                    <li><label className="fl ant-form-item">开户卡号</label>
                        <FormItem  className="fr"  label="">
                            <Input type='number' {...getFieldProps('bankNo')} placeholder='如：621333322285552' />
                        </FormItem>
                    </li>
                    <li><label className="fl ant-form-item">登录密码</label>
                        <FormItem className="fr" label="">
                            <Input type="password"  {...getFieldProps('password')} placeholder="8-16位数字、字母、特殊字符组成" />
                        </FormItem>
                     </li>
                </ul>
            }
            </Form>
          </div>
        </Modal>
        </div>
      )
    }
});
love = createForm()(love);
export default love;
